<template>
  <div>
    <el-dialog
      :title="diainfo.isAdd ? '添加商品分类' : '编辑分类' "
      :visible.sync="diainfo.isShow"
      :before-close="cancel"
    >
      <el-form :model="menuForm" :rules="rules" ref="menuRef">
        <el-form-item label="上级分类" :label-width="formLabelWidth" prop="pid">
          <el-select v-model="menuForm.pid" placeholder="请选择">
            <el-option label="顶级分类" :value="0"> </el-option>
            <el-option
              v-for="item in catelist"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="分类名称"
          :label-width="formLabelWidth"
          prop="catename"
        >
          <el-input v-model="menuForm.catename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item  v-if="menuForm.pid !=0"   label="图片" :label-width="formLabelWidth">
          <el-upload
            :limit="1"
            :on-preview="onPreview"
            action="#"
            :file-list="fileList"
            list-type="picture-card"
            :on-change="changeInfo"
            :auto-upload="false"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="menuForm.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { cateadd, cateInfo, cateEdit } from '../../../api/api'
export default {
  props: ['diaInfo'],
  data () {
    return {
      diainfo: this.diaInfo,

      formLabelWidth: '120px',
      rules: {
        catename: [
          {
            required: true,
            message: '请输入分类名称',
            trigger: 'blur'
          },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择上级分类', trigger: 'change' }
        ]
      },
      menuForm: {
        pid: 0, // 顶级菜单-0-number
        catename: '',
        status: 1,
        img: ''
        // img: 'https://img1.baidu.com/it/u=413643897,2296924942&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1682614800&t=c56f6772982616dc87a557a260e4d2c4'
      },
      dialogVisible: false,
      dialogImageUrl: '',
      fileList: []
    }
  },
  methods: {
    ...mapActions('classify', ['getCatelist']),
    cancel () {
      this.$emit('cancel', false)
      this.reset()
    },
    changePid (id) {},
    add () {
      this.$refs.menuRef.validate((val) => {
        if (val) {
          if (this.diainfo.isAdd) {
            cateadd(this.menuForm)
              .then((res) => {
                if (res.code === 200) {
                  this.$message.success(res.msg)
                  this.getCatelist()
                  this.cancel()
                } else {
                  this.$message.error(res.msg)
                }
              })
          } else {
            // 编辑接口
            cateEdit(this.menuForm).then((res) => {
              console.log(res)
              if (res.code === 200) {
                // 添加成功
                this.$message.success(res.msg)
                this.reset()
                this.getCatelist()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        }
      })
    },
    changeInfo (file) {
      this.menuForm.img = file.raw
    },
    reset () {
      this.menuForm = {
        pid: 0, // 顶级菜单-0-number
        catename: '',
        status: 1
      }
      this.fileList = []
      this.$refs.menuRef.resetFields()
    },
    onPreview (file) {
      //   打开预览框
      this.dialogVisible = true
      // 给弹框赋值图片地址
      this.dialogImageUrl = file.url
    },
    lookup (id) {
      // 调用一条数据查询
      cateInfo({
        id
      }).then((res) => {
        if (res.code === 200) {
          this.menuForm = res.list
          this.menuForm.id = id
          // 图片的回显
          this.fileList = this.menuForm.img ? [{ url: this.menuForm.img }] : []
        }
      })
    }
  },
  computed: {
    ...mapGetters({
      catelist: 'classify/getcatelist'
    })
  },
  mounted () {
    if (this.catelist.length === 0) {
      this.getCatelist()
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .el-dialog {
  z-index: 9999999999;
}
</style>>
